<!DOCTYPE html>
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<!--
This test has not yet been updated to run on IE8. See http://b/hotlist?id=36311
-->
<!--meta http-equiv="X-UA-Compatible" content="IE=edge"-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>HsvPalette Unit Tests</title>
  <script src="../base.js"></script>
  <script src="../deps.js"></script>
  <script>
    goog.require('goog.color');
    goog.require('goog.events');
    goog.require('goog.math.Rect');
    goog.require('goog.style');
    goog.require('goog.testing.PropertyReplacer');
    goog.require('goog.testing.events');
    goog.require('goog.testing.jsunit');
    goog.require('goog.ui.HsvPalette');
  </script>
</head>
<body>
  <div id="sandbox"></div>
  <div id="sandboxRtl" dir="rtl"></div>
  <script>
    var samplePalette;
    var eventWasFired = false;
    var stubs = new goog.testing.PropertyReplacer();
    
    function setUp() {
      samplePalette = new goog.ui.HsvPalette();
    }

    function tearDown() {
      samplePalette.dispose();
      stubs.reset();
    }

   function testRtl() {
      samplePalette.render(document.getElementById('sandboxRtl'));
      var color = '#ffffff';
      samplePalette.inputElement.value = color;
      samplePalette.handleInput(null);
      var expectedRight = samplePalette.hsImageEl_.offsetWidth -
          Math.ceil(samplePalette.hsHandleEl_.offsetWidth / 2);
      assertEquals(expectedRight + 'px',
          samplePalette.hsHandleEl_.style['right']);
      assertEquals('', samplePalette.hsHandleEl_.style['left']);
    }

    function testOptionalInitialColor() {
      var initialColor = '#0000ff';
      var customInitialPalette = new goog.ui.HsvPalette(null, initialColor);
      assertEquals(initialColor,
                   goog.color.parse(customInitialPalette.getColor()).hex);
    }

    function testCustomClassName() {
      var customClassName = 'custom-plouf';
      var customClassPalette =
          new goog.ui.HsvPalette(null, null, customClassName);
      customClassPalette.createDom();
      assertTrue(goog.dom.classes.has(customClassPalette.getElement(),
                                      customClassName));
    }

    function testCannotDecorate() {
      assertFalse(samplePalette.canDecorate());
    }

    function testSetColor() {
      var color = '#abcdef';
      samplePalette.setColor(color);
      assertEquals(color, goog.color.parse(samplePalette.getColor()).hex);
    }

    function testChangeEvent() {
      // TODO(user): Add functionality to goog.testing.events to assert
      // an event was fired.
      goog.events.listen(samplePalette, goog.ui.Component.EventType.ACTION,
          function() {eventWasFired = true;});
      samplePalette.setColor('#123456');
      assertTrue(eventWasFired);
    }

    function testSetHsv() {
      // Start from red.
      samplePalette.setColor('#ff0000');

      // Setting hue to 0.5 should yield cyan.
      samplePalette.setHsv(0.5, null, null);
      assertEquals('#00ffff', goog.color.parse(samplePalette.getColor()).hex);

      // Setting saturation to 0 should yield white.
      samplePalette.setHsv(null, 0, null);
      assertEquals('#ffffff',
                   goog.color.parse(samplePalette.getColor()).hex);

      // Setting value/brightness to 0 should yield black.
      samplePalette.setHsv(null, null, 0);
      assertEquals('#000000', goog.color.parse(samplePalette.getColor()).hex);
    }

    function testRender() {
      samplePalette.render(document.getElementById('sandbox'));

      assertTrue(samplePalette.isInDocument());

      var elem = samplePalette.getElement();
      assertNotNull(elem);
      assertEquals(goog.dom.TagName.DIV, elem.tagName);

      if (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('7')) {
        assertSameElements('On IE6, the noalpha class must be present',
            ['goog-hsv-palette', 'goog-hsv-palette-noalpha'],
            goog.dom.classes.get(elem));
      } else {
        assertEquals('The noalpha class must not be present',
           'goog-hsv-palette', elem.className);
      }
    }

    function testNoLeftOverListenersAfterDispose() {
      var initialListenerCount = goog.events.getTotalListenerCount();
      samplePalette.render(document.getElementById('sandbox'));
      samplePalette.dispose();
      assertEquals(initialListenerCount, goog.events.getTotalListenerCount());
    }

    function testSwatchTextIsReadable() {
      samplePalette.render(document.getElementById('sandbox'));

      var swatchElement = samplePalette.swatchElement;

      // Text should be black when background is light.
      samplePalette.setColor('#ccffff');
      assertEquals('#000000',
                   goog.color.parse(goog.style.getStyle(swatchElement,
                                                        'color')).hex);

      // Text should be white when background is dark.
      samplePalette.setColor('#410800');
      assertEquals('#ffffff',
                   goog.color.parse(goog.style.getStyle(swatchElement,
                                                        'color')).hex);
    }

    function testInputColor() {
      samplePalette.render(document.getElementById('sandbox'));
      var color = '#001122';
      samplePalette.inputElement.value = color;
      samplePalette.handleInput(null);
      assertEquals(color, goog.color.parse(samplePalette.getColor()).hex);
    }

    function testHandleMouseMoveValue() {
      samplePalette.render(document.getElementById('sandbox'));
      stubs.set(goog.dom, 'getPageScroll', function() {
        return new goog.math.Coordinate(0, 0);
      });

      // Raising the value/brightness of a dark red should yield a lighter red.
      samplePalette.setColor('#630c00');
      goog.style.setPageOffset(samplePalette.valueBackgroundImageElement, 0, 0);
      goog.style.setSize(samplePalette.valueBackgroundImageElement, 10, 100);
      var boundaries = goog.style.getBounds(
          samplePalette.valueBackgroundImageElement, 0, 0);

      var event = new goog.events.Event();
      event.clientY = -50;
      // TODO(user): Use
      // goog.testing.events.fireMouseDownEvent(
      //     samplePalette.valueBackgroundImageElement);
      // when google.testing.events support specifying properties of the event
      // or find out how tod o it if it already supports it.
      samplePalette.handleMouseMoveV_(boundaries, event);
      assertEquals('#ff1e00', goog.color.parse(samplePalette.getColor()).hex);
    }

    function testHandleMouseMoveHueSaturation() {
      samplePalette.render(document.getElementById('sandbox'));
      stubs.set(goog.dom, 'getPageScroll', function() {
        return new goog.math.Coordinate(0, 0);
      });

      // The following hue/saturation selection should yield a light yellow.
      goog.style.setPageOffset(samplePalette.hsImageEl_, 0, 0);
      goog.style.setSize(samplePalette.hsImageEl_, 100, 100);
      var boundaries = goog.style.getBounds(samplePalette.hsImageEl_);

      var event = new goog.events.Event();
      event.clientX = 20;
      event.clientY = 85;
      // TODO(user): Use goog.testing.events when appropriate (see above).
      samplePalette.handleMouseMoveHs_(boundaries, event);
      // TODO(user): Fix the main code for this, see bug #1324469.
      // NOTE(gboyer): It's a little better than before due to the
      // goog.style getBoundingClientRect fix, but still not the same. :-(
      if (goog.userAgent.IE) {
        var expectedColor = '#ffe0b2';
      } else {
        var expectedColor = '#ffeec4';
      }

      assertEquals(expectedColor,
                   goog.color.parse(samplePalette.getColor()).hex);
    }
  </script>
</body>
</html>
